<template>
	<view class="st-price">
		<text class="price_icon" :class="{'bold': isBold}"
			:style="{
				color: isDel ? delColor : symbolColor, 
				fontSize: symbolSize + 'rpx',
			}">
			{{symbol}}
		</text>
		<view class="price_count" :class="{'price-count-del': isDel, 'bold': isBold}">
			
			<text :style="{
				color: isDel ? delColor : valueColor, 
				'fontSize': valueSize + 'rpx',
			}">{{largePrice}}</text>
			<text v-if="smallPrice > 0" 
				:style="{
					color: smallValueColor ? smallValueColor : valueColor,
					fontSize: smallValueSize ? smallValueSize + 'rpx' : valueSize + 'rpx'
			}">.{{smallPrice}}</text>
		</view>
		<view class="price_unit" :class="{'bold': isUnitBold}" style="margin-left: 2rpx;" :style="{
			color: unitColor,
			fontSize: unitSize + 'rpx'
		}">
			<text>{{unit}}</text>
		</view>
	</view>
</template>

<script>
	/***********
	@全局价格组件
	参数说明：
	:symbol  货币符号 默认¥
	:symbolSize 货币符号大小 默认30rpx
	:symbolColor 货币符号颜色
	:value 价格 默认0
	:valueSize 价格大小 默认30rpx
	:valueColor 价格颜色
	:isDel 是否显示删除线 默认false
	:delColor 删除线颜色
	:isBold  是否加粗
	***********/
	export default {
		props: {
			symbol: {
				type: String,
				default: '¥'
			},
			symbolSize: {
				type: [Number, String],
				default: 30
			},
			symbolColor: {
				type: String,
				default: '#FC5E53'
			},
			value: {
				type: [String, Number],
				default: '0'
			},
			valueSize: {
				type: [Number, String],
				default: 40
			},
			valueColor: {
				type: String,
				default: '#FC5E53'
			},
			smallValue: {
				type: [String, Number],
				default: '0'
			},
			smallValueSize: {
				type: [Number, String],
				default: ''
			},
			smallValueColor: {
				type: String,
				default: ''
			},
			unit: {
				type: String,
				default: ''
			},
			unitSize: {
				type: [Number, String],
				default: 24
			},
			unitColor: {
				type: String,
				default: '#666666'
			},
			isUnitBold:{
				type: Boolean,
				default: true
			},
			isDel:{
				type: Boolean,
				default: false
			},
			delColor: {
				type: String,
				default: '#999'
			},
			isBold:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				price: 0,
				largePrice: 0,
				smallPrice: 0
			}
		},
		watch: {
			//检测currentCity数值变化
			value(val, oldVal) {
				this.setValue(val)
			},
		},
		created() {
			this.price = this.value
			this.setValue(this.value)
		},
		methods:{
			setValue(value){
				this.largePrice = 0
				this.smallPrice = 0
				if(!value) return
				var price = this.$count.mul(value, 1).toString()
				if(price.indexOf('.') != -1){
					var prices = price.split('.')
					this.largePrice = prices[0]
					this.smallPrice = prices[1]
				}else{
					this.largePrice = price
				}
			},
		},
	}

</script>

<style lang="scss" scoped>
	.st-price{
	}
	.price_icon,
	.price_count,
	.price_unit{
		display: inline-block;
		line-height: 3rpx;
	}
	.price-count-del {
		text-decoration: line-through;
	}
	.bold{
		font-weight: bold;
	}
</style>
